<template>
  <main class="md:w-2/5 w-full mx-auto bg-white position md:mt-30 mt-10 p-7 rounded-lg shadow-md">
    <div class="text-center font-bold text-2xl">注册</div>
    <el-form class="mt-5" label-width="80px">
      <el-form-item label-width="80" label="手机号码">
        <el-input name="phone" v-model="apiForm.userPhone" placeholder="请填写手机号码" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="80" label="账号" class="mt-3">
        <el-input name="account" v-model="apiForm.userAccount" placeholder="请输入账号" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="80" label="店名" class="mt-3">
        <el-input name="account" v-model="apiForm.sellerName" placeholder="请输入店名" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="80" label="密码">
        <el-input name="pwd" type="password" v-model="apiForm.userPassword" placeholder="请输入登录密码"
          size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="80" label="确认密码">
        <el-input type="password" v-model="confirmPwd" placeholder="请输入登录密码" size="large"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="default" size="large" class="w-full" @click="activedBtn">点击按钮验证</el-button>
      </el-form-item>
      <el-form-item label-width="0" class="mt-8">
        <el-button type="primary" size="large" class="w-2/3 mx-auto" :disabled="!btnState"
          @click="register">注册</el-button>
      </el-form-item>
    </el-form>
    <div class="flex justify-around">
      <div>
        已有账号？
        <span class="cursor-pointer text-primary" @click="$router.push('/passport/login')">去登录</span>
      </div>
    </div>
  </main>

</template>

<script setup>
import { registerApi } from '@/apis/user';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
let btnState = ref(false)
let apiForm = reactive({
  userPhone: '',
  userAccount: '',
  userPassword: '',
  sellerName: '',
  userType: '1',
})
let confirmPwd = ref('')
const activedBtn = () => {
  if (apiForm.userPhone !== '' && confirmPwd.value === apiForm.userPassword) {
    btnState.value = true
  } else {
    ElMessage({
      message: '请先填写完表单',
      type: 'error'
    })
  }
}
const register = async () => {
  if (confirmPwd.value !== apiForm.userPassword) {
    ElMessage({
      message: '两次密码不一致',
      type: 'error'
    })
  } else {
    let res = await registerApi(apiForm)
    console.log(res)
    if (res.data.message == '注册成功') {
      ElMessage({
        message: '注册成功',
        type: 'success'
      })
      localStorage.setItem('userId', res.data.data.userInfo.userId)
      router.push('/index')
    } else {
      ElMessage({
        message: '注册失败',
        type: 'error'
      })
    }
  }
}
</script>